<template>
  <div class="detail-card-wrap">
    <div class="detail-title">
      <div class="left">
        <div class="left-index">
          <span>{{ props.index + 1 }}</span>
        </div>
        <div class="left-title">
          <span>{{ props.item.title }}</span>
        </div>
      </div>
      <div class="right">
        <span @click="emitOpenModal(props.item.currentProgress,props.item.index,props.item.title,props.item.stateId)"
              style="margin-right: 20px"
        >
          详情
        </span>
      </div>
    </div>
    <div class="detail-progress">
      <template v-for="(item, index) in progressArr" :key="item.id">
        <div class="detail-line" v-if="index > 0"></div>
        <div
            class="detail-circle"
            :class="selectColor(index)"
        >
          <span>{{ item.label }}</span>
        </div>
      </template>
    </div>
    <div class="detail-tontent" @click="test(props.item.index,props.item.pointArea,props.item.point)">
      <div class="detail-progress-info">
        <div class="info-left">
          <span>区镇：</span>
        </div>
        <div class="info-right">
          <span>{{ props.item.area }}</span>
        </div>
      </div>
      <div class="detail-progress-info">
        <div class="info-left">
          <span>类型：</span>
        </div>
        <div class="info-right">
          <span>{{ props.item.classname }}</span>
        </div>
      </div>
      <div class="detail-progress-info">
        <div class="info-left">
          <span>规划用途：</span>
        </div>
        <div class="info-right">
          <span>{{ props.item.type }}</span>
        </div>
      </div>

      <div class="detail-progress-info">
        <div class="info-left">
          <span>地块位置：</span>
        </div>
        <div class="info-right">
          <span>{{ props.item.location }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {syncBuiltinESMExports} from "module";
import Data from "../../../../../../public/config/data.json"
import {
  defineProps,
  reactive,
  ref,
  defineEmits,
  getCurrentInstance, computed,
} from "vue";

interface searchDetail {
  index: number;

  title: string;
  currentProgress: number;
  area: string;
  type: string;
  classname: string;
  location: string;
  process:string;
  fileState:string;
  exploreProcess:string;
}

const instance = getCurrentInstance();
const yjs = instance?.appContext.config.globalProperties.yjs;
const Cesium = instance?.appContext.config.globalProperties.Cesium;
const test1 = () => {
  // console.log(props.index)
}
const test = (index, area, point) => {
  // let points=[]
  // let str=point.substring(point.lastIndexOf("(")+1,point.lastIndexOf(")"));
  // points=str.split(" ")
  // console.log(area)
  // console.log(point)
  let collections = window.viewer.dataSources.getByName("myland")[0];
  var entities = null;
  entities = collections.entities.values;
//使用geoserver服务
  // for(let datasource of collections){
  //     let datasourcename= datasource.constructor.name;
  //     if(datasourcename=='CustomDataSource'){

  //       let typeid=datasource.entities.values[0].id;
  //       // console.log(typeid);
  //       let elementid = typeid.substring(typeid.lastIndexOf("_") + 1,typeid.lastIndexOf(".") );
  //       // console.log(elementid);
  //       if(elementid=="land"){
  //         entities=datasource.entities.values
  //       }

  //       // if(entities==null){
  //       //   entities=datasource.entities.values;

  //       // }else{
  //       //   if(entities.length>datasource.entities.values.length)

  //       // }
  //     }
  // }

  // console.log(collections.length);
  // if(collections.)

  // let entitiesccc = window.viewer.jrism.getLayer("地块面","name").dataSource.entities.values;
  for (const element of entities) {
    // let elementidStr = element.id;
    // let elementid = elementidStr.substring(elementidStr.lastIndexOf(".") + 1);
    let elementidStr = element.name;
    let elementid = elementidStr.substring(elementidStr.lastIndexOf(".") + 1);

    if (index == elementid) {
      window.viewer
          .flyTo(element)
          .then(() => {
            yjs.util.highlightEntity(element, {
              time: 5, //闪烁时长（秒）
              maxAlpha: 1,
              color: Cesium.Color.YELLOW,
              onEnd: function () {
                //结束后回调
              },
            });
          });
    }
  }

  // window.viewer.jrism.centerAt({"x":points[0],"y":points[1],"z":500});
};

//进行选择
const select=(index:string,defaultClass:string)=>{
  if(index !== null && index !== ''){
     switch (index){
       case '已完成':
         defaultClass = 'red'
         break;
       case '已报，材料缺':
         defaultClass = 'orange'
         break;
       case '完成':
         defaultClass = 'red'
         break;
       case '已委托':
         defaultClass = 'orange'
         break;
       case '未进场':
         defaultClass = 'orange'
         break;
       case '进场采样':
         defaultClass = 'orange'
         break;
       case '未选择':
         defaultClass = 'blue'
         break;
       case '进场施工中':
         defaultClass = 'orange'
         break;
       case '土地不做平整':
         defaultClass = 'blue'
         break;
       default:
         break;
     }
     return defaultClass
  }
}
//查选颜色
const selectColor = (i) => {
  let defaultClass = ''
  if (i < props.item.currentProgress) {
    if (i === 1) {
      defaultClass = select(props.item.process,defaultClass)
    } else if (i === 2) {
      defaultClass = select(props.item.fileState,defaultClass)
    } else if (i === 3) {
      defaultClass = select(props.item.exploreProcess,defaultClass)
    } else {
      defaultClass = 'is-active'
    }
  }
  return defaultClass
}

const props = defineProps<{
  item: searchDetail,
  index: {
    type: number
  }
}>()
const emit = defineEmits(['selectItemModal', 'passLandId', 'passTitle', 'passStateId'])
// const count = ref(0);
// const load = () => {
//   count.value += 2;
// };

//搜索结果的序列
const progressArr = reactive(Data).progressArr

const emitOpenModal = (currentProgress, index, title, stateId) => {
  emit('selectItemModal', currentProgress)
  emit('passLandId', index)
  emit('passTitle', title)
  emit('passStateId', stateId)
}
</script>

<style lang="scss" scoped>
.detail-card-wrap {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  .detail-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      .left-index {
        width: 24px;
        height: 24px;
        background: #f7a95d;
        color: #ffffff;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        margin-right: 8px;
      }

      .left-title {
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
      }
    }

    .right {
      color: #409eff;
      cursor: pointer;
    }
  }

  .detail-progress {
    margin-top: 16px;
    display: flex;
    align-items: center;

    .detail-line {
      width: 20px;
      height: 1px;
      background: #e4e7ed;
      margin: 0 15px 0 8px;
    }

    .detail-circle {
      width: 24px;
      height: 24px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 80px;
      line-height: 24px;
      text-align: center;
      color: #ffffff;

      &.is-active {
        background: #409eff;
      }

      &.red {
        background: red;
      }

      &.blue {
        background: blue;
      }

      &.orange {
        background: orange;
      }
    }
  }

  .detail-progress-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    margin-top: 16px;

    .info-left {
      width: 100px;
    }
  }
}
</style>
